<template>
  <div
    class="component-wrapper"
    :class="computedClasses"
    :style="wrapperStyle"
    @click.stop="handleSelect"
  >
    <!-- 文本组件 -->
    <div
      v-if="component.type === 'text'"
      class="text-component"
      :style="computedStyles"
    >
      {{ component.props.content }}
    </div>

    <!-- 按钮组件 -->
    <el-button
      v-else-if="component.type === 'button'"
      :type="component.props.type"
      :size="component.props.size"
      :disabled="component.props.disabled"
      :loading="component.props.loading"
      :style="computedStyles"
    >
      {{ component.props.text }}
    </el-button>

    <!-- 图片组件 -->
    <img
      v-else-if="component.type === 'image'"
      :src="component.props.src"
      :alt="component.props.alt"
      :style="computedStyles"
      class="image-component"
    />

    <!-- 输入框组件 -->
    <el-input
      v-else-if="component.type === 'input'"
      :placeholder="component.props.placeholder"
      :type="component.props.type"
      :size="component.props.size"
      :disabled="component.props.disabled"
      :clearable="component.props.clearable"
      :style="computedStyles"
    />

    <!-- 文本域组件 -->
    <el-input
      v-else-if="component.type === 'textarea'"
      type="textarea"
      :placeholder="component.props.placeholder"
      :rows="component.props.rows"
      :disabled="component.props.disabled"
      :resize="component.props.resize"
      :style="computedStyles"
    />

    <!-- 选择器组件 -->
    <el-select
      v-else-if="component.type === 'select'"
      :placeholder="component.props.placeholder"
      :size="component.props.size"
      :disabled="component.props.disabled"
      :clearable="component.props.clearable"
      :style="computedStyles"
    >
      <el-option
        v-for="option in component.props.options"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>

    <!-- 容器组件 -->
    <div
      v-else-if="component.type === 'container'"
      class="container-component"
      :style="computedStyles"
    >
      <div class="container-placeholder">容器组件</div>
    </div>

    <!-- 分割线组件 -->
    <el-divider
      v-else-if="component.type === 'divider'"
      :direction="component.props.direction"
      :content-position="component.props.contentPosition"
      :style="computedStyles"
    />

    <!-- 图表组件 -->
    <LineChart
      v-else-if="component.type === 'line-chart'"
      :data="component.props.data"
      :title="component.props.title"
      :style="computedStyles"
    />

    <BarChart
      v-else-if="component.type === 'bar-chart'"
      :data="component.props.data"
      :title="component.props.title"
      :style="computedStyles"
    />

    <PieChart
      v-else-if="component.type === 'pie-chart'"
      :data="component.props.data"
      :title="component.props.title"
      :style="computedStyles"
    />

    <!-- 默认未知组件 -->
    <div v-else class="unknown-component" :style="computedStyles">
      未知组件: {{ component.type }}
    </div>

    <!-- 选中状态的操作按钮 -->
    <div v-if="isSelected && !previewMode" class="component-actions">
      <el-button size="small" type="danger" @click.stop="handleDelete">
        <el-icon><Delete /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useEditorStore } from '@/stores/editor'
import { Delete } from '@element-plus/icons-vue'
import LineChart from './charts/LineChart.vue'
import BarChart from './charts/BarChart.vue'
import PieChart from './charts/PieChart.vue'

const props = defineProps({
  component: {
    type: Object,
    required: true
  },
  previewMode: {
    type: Boolean,
    default: false
  }
})

const editorStore = useEditorStore()

// 计算是否选中
const isSelected = computed(() => {
  return editorStore.selectedComponentId === props.component.id
})

// 计算样式
const computedStyles = computed(() => {
  const styles = { ...props.component.styles }

  // 如果是文本组件，添加文本相关样式
  if (props.component.type === 'text') {
    if (props.component.props.fontSize) styles.fontSize = props.component.props.fontSize
    if (props.component.props.color) styles.color = props.component.props.color
    if (props.component.props.fontWeight) styles.fontWeight = props.component.props.fontWeight
    if (props.component.props.textAlign) styles.textAlign = props.component.props.textAlign
    if (props.component.props.lineHeight) styles.lineHeight = props.component.props.lineHeight
    if (props.component.props.letterSpacing) styles.letterSpacing = props.component.props.letterSpacing
  }

  // 如果是图片组件，添加图片相关样式
  if (props.component.type === 'image') {
    if (props.component.props.width) styles.width = props.component.props.width
    if (props.component.props.height) styles.height = props.component.props.height
  }

  // 处理自定义样式
  if (props.component.styles.customStyle) {
    try {
      const customStyles = props.component.styles.customStyle.split(';')
      customStyles.forEach(style => {
        if (style.trim()) {
          const [prop, value] = style.split(':')
          if (prop && value) {
            // 转换CSS属性名为驼峰格式
            const propName = prop.trim().replace(/-([a-z])/g, (g) => g[1].toUpperCase())
            styles[propName] = value.trim()
          }
        }
      })
    } catch (error) {
      console.warn('自定义样式解析失败:', error)
    }
  }

  return styles
})

// 计算包装器样式
const wrapperStyle = computed(() => {
  const baseStyles = {
    position: 'absolute',
    left: `${props.component.position.x}px`,
    top: `${props.component.position.y}px`,
    cursor: props.previewMode ? 'default' : 'pointer'
  }

  // 添加z-index支持
  if (props.component.styles.zIndex) {
    baseStyles.zIndex = props.component.styles.zIndex
  }

  return baseStyles
})

// 计算CSS类名
const computedClasses = computed(() => {
  const classes = ['component-wrapper']

  if (props.previewMode) {
    classes.push('preview-mode')
  }

  if (isSelected.value && !props.previewMode) {
    classes.push('selected')
  }

  // 添加自定义CSS类
  if (props.component.styles.className) {
    const customClasses = props.component.styles.className.split(' ')
    classes.push(...customClasses.filter(cls => cls.trim()))
  }

  return classes
})

// 选中组件
const handleSelect = () => {
  if (!props.previewMode) {
    editorStore.selectComponent(props.component.id)
  }
}

// 删除组件
const handleDelete = () => {
  editorStore.removeComponent(props.component.id)
}
</script>

<style lang="scss" scoped>
.component-wrapper {
  position: relative;
  border: 2px solid transparent;
  min-width: 20px;
  min-height: 20px;

  &.selected {
    border-color: #409eff;
    border-style: dashed;
  }

  &:hover:not(.preview-mode) {
    border-color: #409eff;
    border-style: solid;
  }
}

.component-actions {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 10;
}

.text-component {
  display: inline-block;
  min-width: 20px;
  min-height: 20px;
}

.image-component {
  display: block;
  max-width: 100%;
}

.container-component {
  min-width: 100px;
  min-height: 60px;
  position: relative;

  .container-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 12px;
    pointer-events: none;
  }
}

.unknown-component {
  padding: 10px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  color: #666;
  text-align: center;
}
</style>
